<template>
  <div class="main">
    <el-button type="primary" @click="handleAdd">新增客户</el-button>
    <el-table :data="currentPageData" border v-loading="loading">
      <el-table-column label="序号" type="index" width="100" align="center" :index="indexMethod"></el-table-column>
      <el-table-column label="客户编号" prop="index" width="300" align="center"></el-table-column>
      <el-table-column label="客户名称" align="center">
        <template #default="scope">
          <a size="small" type="primary" @click="jumpDetails(scope.row)">{{ scope.row.name }}</a>
        </template>
      </el-table-column>
      <el-table-column label="经营地址" prop="address" align="center"></el-table-column>
      <el-table-column label="客户状态" prop="state" align="center"></el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template #default="scope">
          <el-button size="small" type="primary" @click="jumpEdit(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalRecords"
    >
    </el-pagination>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { getCustomerInfo,deleteCustomerInfo} from './customer.js';


const router = useRouter();

// 响应式数据
const customerList = ref([]);
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(5);
const totalRecords = ref(0);

// 获取客户数据
const fetchCustomerData = async () => {
  try {
    /*分页查询需要提供的参数*/
    const queryParams = {
      pageNum: currentPage.value,
      pageSize: pageSize.value
    };
    /*调用后端分页查询接口*/
    const response = await getCustomerInfo(queryParams);
    
    if (response.code === 200) {
      // 将后端数据映射到前端结构
      customerList.value = response.data.records.map(item => ({
        index: item.id || 'N/A', 
        name: item.clientName,
        address: item.operateAddress || '地址未提供' ,
        state:item.state === '0' ? '预备' : item.state === '1' ? '启用' : '禁用'
      }));
      
      totalRecords.value = response.data.total;
    } else {
      console.error('获取数据失败:', response.msg);
    }
  } catch (error) {
    console.error('请求出错:', error);
  } finally {
    loading.value = false;
  }
};

// 计算当前页显示的数据
const currentPageData = computed(() => {
  return customerList.value;
});

// 分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1; // 重置到第一页
  fetchCustomerData();
};

// 当前页变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  fetchCustomerData();
};

const viewState = ref('');

//新增客户
const handleAdd = () => {
  router.push({ 
    path: '/customer/curd',
    query:{
      viewState:'create'
    }
  });
};

//删除客户
const handleDelete = async(row) => {
  const response = await deleteCustomerInfo(row.index);
};


// 编辑客户
const jumpEdit = (row) => {
  router.push({ 
    path: '/customer/curd',
    query: { 
      viewState:'update',
      id: row.index
    }
  });
};


//点击查看详情
const jumpDetails = (row) => {
  router.push({ 
    path: '/customer/curd',
    query: { 
      viewState:'view',
      id: row.index
    }
  });
}



onMounted(() => {
  fetchCustomerData();
});
</script>

<style scoped>
.main {
  padding: 20px;
}
.el-table {
  margin-top: 15px;
}
</style>